<template>
  <div id="app">
    <router-view class="root-app" />
  </div>
</template>

<script>
  import { mapActions, mapState, mapMutations} from 'vuex'
  import io from 'socket.io-client'
  export default {
    name: 'app',
    computed: {
      ...mapState(['cityInfo'])
    },
    created () {
//      this.onReady()
    },
    methods: {
      ...mapMutations([
        'AMOUNT_LINE',
        'MILEAGE_LINE',
        'USER_FLOW_LINE',
        'AVERAGE_USERFLOW',
        'BUS_WARN_PIE',
        'DAY_TOTAL',
        'OPERATE_DATA',
        'INTERVAL_MILEAGE',
        'MOBILE_PAY_MOUNT',
        'MOBILE_PAY_COUNT',
        'MOBILE_CARD_COUNT',
        'INTERVAL_TOTAL',
        'MOBILE_MAP',
        'DEVICE_DATA',
        'SEX_DATA',
        'AREA_DATA',
        'AGE_DATA',
        'AVERAGE_PAY',
        'AVERAGE_PAY_PIE',
        'BUS_AVERAGE_PAY',
        'CITY_PAY',
        'CITY_MONTH_PAY'
      ]),
      onReady () {
        let that = this
        const socket = io.connect('http://47.98.17.80:9005/')
//        const socket = io.connect('http://127.0.0.1:9005/')
        socket.emit('join', {cityCode: this.cityInfo.cityCode})
        socket.on('trafficData', function (data) {
          console.log('traffic-data' + data)
          let newData = JSON.parse(data)
          that.AMOUNT_LINE(JSON.parse(newData.amountLine))
          that.MILEAGE_LINE(JSON.parse(newData.mileageLine))
          that.USER_FLOW_LINE(JSON.parse(newData.userFlowLine))
          that.AVERAGE_USERFLOW(JSON.parse(newData.userFlowLine).data2)
          that.BUS_WARN_PIE(JSON.parse(newData.busWarnPie).BusLife)
          that.DAY_TOTAL(JSON.parse(newData.yestodayData).list)
          that.OPERATE_DATA(JSON.parse(newData.operateData).list)
          that.INTERVAL_MILEAGE(JSON.parse(newData.intervalMileage))
        })
        socket.on('mobileData', function (data) {
          console.log('mobile-data' + data)
          let newData = JSON.parse(data)
          that.MOBILE_PAY_MOUNT(JSON.parse(newData.mobilePayMount))
          that.MOBILE_PAY_COUNT(JSON.parse(newData.mobilePayCount))
          that.MOBILE_CARD_COUNT(JSON.parse(newData.mobileCardCount))
          that.INTERVAL_TOTAL(JSON.parse(newData.intervalTotal))
          that.MOBILE_MAP(JSON.parse(newData.mapData))
          that.DEVICE_DATA(JSON.parse(newData.deviceData))
          that.SEX_DATA(JSON.parse(newData.sexData))
          that.AREA_DATA(JSON.parse(newData.areaData))
          that.AGE_DATA(JSON.parse(newData.ageData))
          that.AVERAGE_PAY(JSON.parse(newData.averagePay))
          that.AVERAGE_PAY_PIE(JSON.parse(newData.averagePayPie))
          that.BUS_AVERAGE_PAY(JSON.parse(newData.busAveragePay))
          that.CITY_PAY(JSON.parse(newData.cityPay))
          that.CITY_MONTH_PAY(JSON.parse(newData.cityMonthPay))
        })
      }
    }
  }
</script>

<style>
  .root-app{
    width: 100%;
    height: 100%;
    background: #080910;
  }
</style>

